import { useMemo, useReducer, useState } from "react"

export default function Cart() {

  const [input, setInput] = useState('')
  
  const initData = [
    { name: '小满(只)', price: 100, count: 1, id: 1, isEdit: false },
    { name: '中满(只)', price: 200, count: 1, id: 2, isEdit: false },
    { name: '大满(只)', price: 300, count: 1, id: 3, isEdit: false }
  ]
  type Data = typeof initData

  type Action = {
    type: 'add' | 'minus' | 'edit' | 'delete' | 'update_name' | 'blur'
    id: number,
    name?: string
  }

  const reducer = (state: Data,action: Action) => {
    switch (action.type) {
      case 'add':
        return state.map(item => {
          if (item.id === action.id) {
            return {
              ...item,
              count: item.count + 1
            }
          }
          return item
        })
      case 'minus':
        return state.map(item => {
          if (item.id === action.id) {
            return {
              ...item,
              count: item.count - 1
            }
          }
          return item
        })
      case 'delete':
        return state.filter(item => item.id !== action.id)
      case 'edit':
        return state.map(item => {
          if (item.id === action.id) {
            return {
              ...item,
              isEdit: true
            }
          }
          return {
            ...item,
            isEdit: false
          }
        })
      case 'update_name':
        return state.map(item => {
          if (item.id === action.id) {
            return {
              ...item,
              name: action.name!,
            }
          }
          return item
        })
      case 'blur':
        return state.map(item => {
          if (item.id === action.id) {
            return {
              ...item,
              isEdit: false
            }
          }
          return item
        })
      default:
        return state
    }
  }

  

  const [data,dispatch] = useReducer(reducer, initData)

  // 返回值而不是函数
  const total = useMemo(() => {
    console.log('重新计算了');
    
    return data.reduce((prev, cur) => prev + cur.price * cur.count, 0)
  },[data])  

  return (
    <>
      <h2>购物车</h2>
      <input type="text" value={input} onChange={e => setInput(e.target.value)} />
      <table cellSpacing={0} width={800} border={1}>
        <thead>
          <tr>
            <th>商品</th>
            <th>单价</th>
            <th>数量</th>
            <th>总价</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          {
            data.map(item => (
              <tr key={item.id}>
                <td align="center">
                  {item.isEdit ? <input onBlur={() => dispatch({type: 'blur',id: item.id})} onChange={(e) => dispatch({type: 'update_name',id: item.id,name: e.target.value})} value={item.name}></input> : item.name}
                </td>
                <td align="center">{item.price}</td>
                <td align="center">
                  <button onClick={() => dispatch({type: 'add',id: item.id})}>+</button>
                  {item.count}
                  <button onClick={() => dispatch({type: 'minus',id: item.id})}>-</button>
                </td>
                <td align="center">{item.price * item.count}</td>
                <td align="center">
                  <button onClick={() => dispatch({type: 'edit',id: item.id})}>编辑</button>
                  <button onClick={() => dispatch({type: 'delete',id: item.id})}>删除</button>
                </td>
              </tr>
            ))
          }
        </tbody>
        <tfoot>
          <tr>
            <td colSpan={4}></td>
            <td align="right">总价: {
              total
            }</td>
          </tr>
        </tfoot>
      </table>
    </>
  )

}